<template>
  <div :class="styles['private-store']">
    <UidSearchBar tips="输入用户UID或者货架UID, 可查询对应账号的私人云仓明细：">
      <el-form inline :model="searchForm">
        <el-form-item label="用户UID:">
          <el-input v-model="searchForm.userId" placeholder="用户UID" clearable style="width: 200px"/>
        </el-form-item>
        <el-form-item label="货架UID:">
          <el-input v-model="searchForm.userWmsId" placeholder="货架UID" clearable style="width: 200px"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button type="plain" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </UidSearchBar>
    <hr/>
    <h2 class="ato-title ato-mt-32 ato-mb-12">私人云仓列表:</h2>
    <PackageList
        ref="packageListRef"
        :table="table"
        :pagination="pagination"
        :loading="loading"
    />
  </div>
</template>

<script setup name="PrivateStore">
import {reactive, onMounted} from 'vue'
import { PackageList, UidSearchBar } from '@/components'
import columnsMap from '@/components/PackageList/columns'
import {getCardListApi} from '@/service/card'
import {useList} from '@/hooks'

// 搜索表单
const searchForm = reactive({
  userId: '',
  userWmsId: ''
})

// list组件数据
const [loading, table, pagination] = useList({
  columns: columnsMap.get(19),
  load: onLoad
})

// 获取表格数据
async function onLoad () {
  loading.value = true
  const res = await getCardListApi({
    pageNo: pagination.currentPage,
    pageSize: pagination.pageSize,
    userId: searchForm.userId,
    userWmsId: searchForm.userWmsId
  })
  if (res.code === __code) {
    table.rows = res.data?.list || []
    pagination.total = res.data?.total || 0
  }
  loading.value = false
}

// 搜索按钮
function handleSearch () {
  pagination.currentPage = 1
  onLoad()
}
// 重置
function resetSearch () {
  searchForm.userWmsId = ''
  searchForm.userId = ''
  pagination.currentPage = 1
  pagination.pageSize = 10
  onLoad()
}

onMounted(() => {
  onLoad()
})

</script>

<style lang="less" src="./index.less" module="styles">
</style>
